---
title: インテグレーションを追加する
i18nReady: true
---

import IntegrationsNav from '~/components/IntegrationsNav.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components'

**Astroインテグレーション**により、わずか数行のコードでプロジェクトに新しい機能や挙動を追加できます。自分でカスタムインテグレーションを書いたり、公式のインテグレーションを利用したり、コミュニティによって作られたインテグレーションを利用できます。

インテグレーションにより…

- React、Vue、Svelte、Solidなどの一般的なUIフレームワークを使用できます。
- TailwindやPartytownのようなツールを数行のコードで組み込めます。
- サイトマップの自動生成など、プロジェクトに新機能を追加できます。
- ビルドプロセスや開発サーバーなどにフックするカスタムコードを書けます。

:::tip[インテグレーションディレクトリ]
[インテグレーションディレクトリ](https://astro.build/integrations/)で、何百もの公式・コミュニティ製のインテグレーションを検索・閲覧できます。認証、アナリティクス、パフォーマンス、SEO、アクセシビリティ、UI、開発者ツールなど、Astroプロジェクトに追加すべきパッケージを見つけてください。
:::

## 公式インテグレーション

<IntegrationsNav />

## インテグレーションの自動セットアップ

Astroには、公式インテグレーションのセットアップを自動化するための`astro add`コマンドが含まれています。一部のコミュニティプラグインもこのコマンドを使用して追加できます。`astro add`がサポートされているかどうか、あるいは[手動でインストール](#手動インストール)する必要があるかどうかは、各インテグレーションのドキュメントを確認してください。

好みのパッケージマネージャーを使用して`astro add`コマンドを実行すると、インテグレーション用の自動ウィザードが設定ファイルの更新と必要な依存関係のインストールを行います。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add react
  ```
  </Fragment>
</PackageManagerTabs>

複数のインテグレーションを同時に追加することも可能です。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add react tailwind partytown
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add react tailwind partytown
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add react tailwind partytown
  ```
  </Fragment>
</PackageManagerTabs>

:::note[インテグレーションの依存関係に対処する]
インテグレーションの追加後に`Cannot find package '[package-name]'`のような警告が表示された場合、パッケージマネージャーが[peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/)をインストールできていないかもしれません。こうした足りないパッケージをインストールするには、`npm install [package-name]`を実行してください。
:::

### 手動インストール

Astroインテグレーションは、常に`astro.config.mjs`ファイルの`integrations`プロパティを通じて追加します。

Astroプロジェクトにインテグレーションをインポートするには、3つの主要な方法があります。
1. [npmパッケージのインテグレーションをインストールする](#npmパッケージのインストール)。
2. プロジェクト内のローカルファイルから独自のインテグレーションをインポートする。
3. インテグレーションを設定ファイルに直接インラインで記述する。

    ```js
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import installedIntegration from '@astrojs/vue';
    import localIntegration from './my-integration.js';

    export default defineConfig({
      integrations: [
        // 1. インストール済みのnpmパッケージからインポート
        installedIntegration(),
        // 2. ローカルのJSファイルからインポート
        localIntegration(),
        // 3. インラインオブジェクト
        {name: 'namespace:id', hooks: { /* ... */ }},
      ]
    });
    ```

[インテグレーションAPI](/ja/reference/integrations-reference/)のリファレンスで、インテグレーションを書くための様々な方法について参照してください。

#### npmパッケージのインストール

パッケージマネージャーを使用してnpmパッケージのインテグレーションをインストールし、`astro.config.mjs`を手動で更新します。

たとえば、`@astrojs/sitemap`インテグレーションをインストールするには以下のようにします。

<Steps>
1. 好みのパッケージマネージャーを使用してプロジェクトの依存関係にインテグレーションをインストールします。

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm install @astrojs/sitemap
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm add @astrojs/sitemap
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn add @astrojs/sitemap
     ```
     </Fragment>
   </PackageManagerTabs>

2. `astro.config.mjs`にインテグレーションをインポートし、設定オプションとともに`integrations[]`配列に追加します。

    ```js title="astro.config.mjs" ins={2} ins="sitemap()"
    import { defineConfig } from 'astro/config';
    import sitemap from '@astrojs/sitemap';

    export default defineConfig({
      // ...
      integrations: [sitemap()],
      // ...
    });
    ```

    インテグレーションごとに設定方法は異なる可能性があるため、各インテグレーションのドキュメントを読み、使用するインテグレーションの設定オプションを必要に応じて`astro.config.mjs`で適用してください。
</Steps>

### カスタムオプション

インテグレーションは、ほとんどの場合は実際のインテグレーションオブジェクトを返すファクトリ関数として定義されます。これにより、ファクトリ関数に引数やオプションを渡して、プロジェクト用にインテグレーションをカスタマイズできます。

```js
integrations: [
  // 関数の引数によりインテグレーションをカスタマイズする例
  sitemap({filter: true})
]
```

### インテグレーションの切り替え

Falsyなインテグレーションは無視されるため、`undefined`や真偽値が設定されてしまうことを気にすることなく、インテグレーションのオンとオフを切り替えられます。

```js
integrations: [
  // サイトマップのビルドをWindowsではスキップする例
  process.platform !== 'win32' && sitemap()
]
```

## インテグレーションをアップグレードする

公式インテグレーションを一括でアップグレードするには、`@astrojs/upgrade`コマンドを実行します。これにより、Astroとすべての公式インテグレーションが最新バージョンにアップグレードされます。

### 自動アップグレード

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # Astroと公式インテグレーションを一括で最新にアップグレードする
  npx @astrojs/upgrade
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # Astroと公式インテグレーションを一括で最新にアップグレードする
  pnpm dlx @astrojs/upgrade
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # Astroと公式インテグレーションを一括で最新にアップグレードする
  yarn dlx @astrojs/upgrade
  ```
  </Fragment>
</PackageManagerTabs>

### 手動アップグレード

1つ以上のインテグレーションを手動アップグレードするには、パッケージマネージャーの適切なコマンドを使用します。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # ReactとTailwindのインテグレーションをアップグレードする例
  npm install @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # ReactとTailwindのインテグレーションをアップグレードする例
  pnpm add @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # ReactとTailwindのインテグレーションをアップグレードする例
  yarn add @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
</PackageManagerTabs>

## インテグレーションを削除する

インテグレーションを削除するには、まずプロジェクトからインテグレーションをアンインストールします。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm uninstall @astrojs/react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm remove @astrojs/react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn remove @astrojs/react
  ```
  </Fragment>
</PackageManagerTabs>

続いて、`astro.config.*`ファイルからインテグレーションを削除します。

```js title="astro.config.mjs" del={3,7}
import { defineConfig } from 'astro/config';

import react from '@astrojs/react';

export default defineConfig({
  integrations: [
    react()
  ]
});
```

## 他のインテグレーションを見つける

[Astroインテグレーションのリスト](https://astro.build/integrations/)には、コミュニティによって開発された多くのインテグレーションが掲載されています。詳細な使い方や設定方法については、上のリンクをたどってみてください。

## 独自のインテグレーションを作成する

AstroのインテグレーションAPIはRollupとViteに影響を受けており、RollupやViteのプラグインを書いたことがある人なら誰でも親しみやすいように設計されています。

[インテグレーションAPI](/ja/reference/integrations-reference/)リファレンスを確認し、インテグレーションができること、自分で作成する方法について学んでみてください。
